<script setup lang="ts">
/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
import {
  rechargeWalletList,
  rechargeWalletAdd,
  rechargeWalletUpdate,
  rechargeWalletDel
} from "@/api/user";
import { formatTimestamp } from "@/utils/index";
import WalletModal from "./components/wallet-modal/index.vue";
import { UserQuery, UserPageVO } from "@/api/user/types";

defineOptions({
  name: "User",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm); // 查询表单
const loading = ref(false);
const total = ref(0);
const visibleModal = ref(false);
const productInfo = ref<any>({});
const modalKey = ref(0); // 用于刷新组件

const queryParams = reactive<UserQuery>({
  page: 1,
  ps: 10,
  uid: "",
  s_address: ""
});

const userList = ref<UserPageVO[]>();
watch(visibleModal, (newValue) => {
  if (!newValue) {
    modalKey.value = new Date().getTime();
    return productInfo.value = {};
  }
});
/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  rechargeWalletList(queryParams)
    .then(({ data }) => {
      userList.value = data.data;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.page = 1;
  queryParams.deptId = undefined;
  handleQuery();
}

// 
const submitForm = (params: any) => {
  rechargeWalletAdd(params).then((res: any) => {
    if (res.code === 200) {
      visibleModal.value = false;
      ElMessage.success('创建成功!');
      handleQuery();
    }
  })
};

// 编辑
const handEdit = (params: any) => {
  productInfo.value = params;
  modalKey.value = new Date().getTime();
  visibleModal.value = true;
};

const handUpdate = (params: any) => {
  rechargeWalletUpdate(params).then((res: any) => {
    if (res.code === 200) {
      productInfo.value = {};
      visibleModal.value = false;
      ElMessage.success('修改成功!');
      handleQuery();
    }
  });
};

// 删除
const handPledgeRobotDel = (params: any) => {
  rechargeWalletDel({
    ids: [params.id],
  }).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('删除成功!');
      handleQuery();
    }
  });
};

onMounted(() => {
  handleQuery(); // 初始化用户列表数据
});
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-col :lg="24" :xs="24">
        <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="会员ID" prop="uid">
              <el-input v-model="queryParams.uid" placeholder="请输入会员ID" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="钱包地址" prop="s_address">
              <el-input v-model="queryParams.s_address" placeholder="请输入地址" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between">
              <div>
                <el-button v-hasPerm="['rechargeWallet:add']" type="primary"
                  @click="visibleModal = true"><i-ep-plus />新增</el-button>
                <!-- <el-button type="danger"><i-ep-delete />批量删除</el-button> -->
              </div>
            </div>
          </template>
          <el-table v-hasPerm="['rechargeWallet:pageList']" v-loading="loading" border :data="userList">
            <el-table-column label="ID" align="center" prop="id" width="100" />
            <el-table-column label="用户UID" align="center" prop="uid" />
            <el-table-column label="收款钱包地址" align="center" prop="address" />
            <el-table-column label="收款钱包地址二维码" align="center" prop="address_qrcode" />
            <el-table-column label="创建时间" align="center" :width="160">
              <template #default="scope">
                <span>{{ formatTimestamp(scope.row.created_at * 1000) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="180">
              <template #default="scope">
                <el-button v-hasPerm="['rechargeWallet:update']" type="primary" size="small"
                  @click="handEdit(scope.row)"><i-ep-edit />编辑</el-button>
                <!-- <el-button type="primary" size="small"><i-ep-refresh-left />重置密码</el-button> -->
                <el-popconfirm title="是否要删除当前钱包地址?" @confirm="handPledgeRobotDel(scope.row)">
                  <template #reference>
                    <el-button v-hasPerm="['rechargeWallet:del']" type="primary" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
            v-model:limit="queryParams.ps" @pagination="handleQuery" />
        </el-card>
      </el-col>
    </el-row>

    <wallet-modal :key="modalKey" :visible="visibleModal" :product="productInfo" @close="visibleModal = false"
      @submit="submitForm" @update="handUpdate" />

  </div>
</template>
